<template>
	<view>
		 <view class="ExchangeGoods-demo">
		  <van-row>
			<van-col span="9"><image :src="list.picUrl" mode="" style="width: 250rpx;height: 250rpx;"></image></van-col>
			<van-col span="14" style="text-align: left">
			  <p>{{list.productName}}</p>
			  <P style="color: #cccccc;font-size: 0.6rem;padding-top: 0.5rem">{{list.labelName}},{{list.labelUnit}}</P>
			</van-col>
		  </van-row>
		  <van-cell-group>
			<van-field v-model="orderChange.orderChangeReason"  label="换货原因" placeholder="必填"/>
		  </van-cell-group>
		  <van-cell title="上传凭证" align="left"/>
		  <view align="left" style="padding: 0.5rem">
			  <view style="float: left;" v-for="item in img">
			  	<image style="width: 5rem;height: 5rem;margin-left: 10rpx;" :src="item" mode=""></image>
			  </view>
			  <van-button @click="shangchuan">上传</van-button>
			  <van-button v-if="img.length>0" @click="qingchu">清除图片</van-button>
			 <!-- <van-uploader
				  v-model="fileList"
				  :max-count="4"
				  :after-read="onRead"
				  accept="image/*"
				  :multiple="true"
				></van-uploader> -->
		  </view>
		</view>
		<view style="text-align: center;">
			<van-button round type="danger" @click="exchange()">提交换货</van-button>
		</view>
	</view>
</template>

<script>
	  import local from '@/utils/localStorage.js';
	  import { addOrderChange,uploadImagesChange } from "../../api/commodity/order_retreat.js";
	  import { Notify } from 'vant';
	  import { Toast } from 'vant';
	export default {
		 components: {
			 
		 },
		data() {
			return {
				 img:[],
			     //订单列表申请换货的对象
				 list:{},
				 //换货原因的理由
				 orderChange:{
				   orderId:'',
				   supplierId:'',
				   orderChangeReason:'',
				   orderChangePicture:'',
				   fileList:[],
				   urlList:[],
				   img0:undefined,
				   img1:undefined,
				   img2:undefined,
				   img3:undefined,
				 },
				 //上传的图片
				 fileList:[],
				 urlList:[],
								 
			}
		},
		//页面渲染前加载
		created(){
			this.list = JSON.parse(sessionStorage.getItem('list'));
			console.log(JSON.stringify(this.list));
		},
		methods: {
			 //上传多图片
		// 	  onRead (e) {
		// 		//注意，我们这里没有使用form表单提交文件，所以需要用new FormData来进行提交
		// 		let fd = new FormData()
		// 		if (e instanceof Array && e.length) { // 判断是否是多图上传 多图则循环添加进去
		// 		  e.forEach(item => {
		// 			fd.append("files", item.file)//第一个参数字符串可以填任意命名，第二个根据对象属性来找到file
		// 		  })
		// 		} else {
		// 		  fd.append("files", e.file)
		// 		}
		// 		uploadImagesChange(fd).then((res)=>{
		// 		  if(res.data.code==200){
		// 			this.urlList.push(res.data);
		// 		  }else {
		
		// 		  }
		// 		  console.log(res);
		// 		})
		// 	  },
			//上传图片
			shangchuan(){
			  uni.chooseImage({ // 从本地相册选择图片或使用相机拍照。
				count: 4, //默认选择1张图片
				sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
				success: (res) => {
					console.log(res.tempFilePaths); //成功则返回图片的本地文件路径列表 tempFilePaths
					this.img = res.tempFilePaths;
					let imgs = this.img.map((value, index) => {
						return {
								name: "files",
								uri: value
							}
					});
					uni.uploadFile({ //将本地资源上传到开发者服务器
						url:'http://localhost:8080/api/local/fabulous/upload', //接口地址
						files: imgs,
						header: {
							'contentType': "application/json;charset=UTF-8",
							'Accept': "application/json;charset=UTF-8",
							'token': local.get("token"),
						},//token添加
						success: (uploadFileRes) => {
							if(uploadFileRes.statusCode==200){
								var data = JSON.parse(uploadFileRes.data)
								this.orderChange.img0 = data.img0;
								this.orderChange.img1 = data.img1;
								this.orderChange.img2 = data.img2;
								this.orderChange.img3 = data.img3;
							}else{
								 Toast("上传失败");
								 this.img = [];
							}
						}
					});
					
				}
			  });
			},
			//清除图片
			qingchu(){
				this.img = [];
				this.orderChange.img0 = undefined;
				this.orderChange.img1 = undefined;
				this.orderChange.img2 = undefined;
				this.orderChange.img3 = undefined;
			},
			  //提交换货信息
			  exchange(){
				this.orderChange.orderId = this.list.orderId;
				this.orderChange.supplierId = this.list.supplierId;
				if(this.orderChange.orderChangeReason=='' ){
					Toast("请填写换货原因");
				}else {
				  addOrderChange(this.orderChange).then((res)=>{
					if(res.data.code==200){
						uni.navigateTo({
							url:'../mine_applyafter/mine_applyafter'
						});
					  Toast.success("申请成功");
					}else {
						uni.navigateTo({
							url:'../mine_applyafter/mine_applyafter'
						});
					  Toast.fail("申请失败");
					}
				  })
				}
			  },
			
		},
		//同步数据
		watch:{
			
		},
	}
</script>

<style>
	 .demo-nav{
	    position: relative;
	    display: flex;
	    -webkit-box-align: center;
	    align-items: center;
	    -webkit-box-pack: center;
	    justify-content: center;
	    height: 56px;
	    background-color: #fff;
	    font-size: 1.1rem;
	  }
	  .demo-nav__back{
	    position: absolute;
	    top: 16px;
	    left: 16px;
	    width: 24px;
	    height: 24px;
	    cursor: pointer;
	  }
	  .ExchangeGoods-demo{
		  padding: 0.5rem;
	  }
</style>
